<template>
    <div>根据y轴的值来进行颜色分段显示</div>
    <div class="lineechart" ref="lineechart"></div>

    
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'


const lineechart = ref(null)
onMounted(()=>{
    drawLine()
})

// 1. 生成插值后的数据（在交叉点插入 threshold）
function generateSegmentedData(data, threshold) {
    const blueData = []; // ≥ threshold
    const redData = [];  // < threshold

    for (let i = 0; i < data.length; i++) {
        const currVal = data[i];
        const prevVal = i > 0 ? data[i - 1] : null;

        // 当前点 ≥ threshold → 蓝色
        if (currVal >= threshold) {
            blueData.push(currVal);
            redData.push(null);

            // 如果前一个点 < threshold，插入一个 threshold 点
            if (prevVal !== null && prevVal < threshold) {
                blueData.splice(blueData.length - 1, 0, threshold); // 在蓝线插入
                redData.splice(redData.length - 1, 0, threshold);  // 在红线插入
            }
        }
        // 当前点 < threshold → 红色
        else {
            redData.push(currVal);
            blueData.push(null);

            // 如果前一个点 ≥ threshold，插入一个 threshold 点
            if (prevVal !== null && prevVal >= threshold) {
                redData.splice(redData.length - 1, 0, threshold);  // 在红线插入
                blueData.splice(blueData.length - 1, 0, threshold); // 在蓝线插入
            }
        }
    }

    return { blueData, redData };
}

const drawLine=()=>{
    const echart = echarts.init(lineechart.value)
    const data = [120, 200, 150, 80, 70, 110, 130];
const threshold = 100;
const { blueData, redData } = generateSegmentedData(data, threshold);
// 2. 调整 xAxis 数据（因为插入了新点）
const adjustedXAxisData = [];
let blueIndex = 0, redIndex = 0;
const xAxisData =['周一', '周二', '周三', '周四', '周五', '周六', '周日']
for (let i = 0; i < xAxisData.length; i++) {
    adjustedXAxisData.push(xAxisData[i]);
    
    // 检查是否需要插入额外的点（如果 blueData 或 redData 比原数据长）
    if (i < xAxisData.length - 1) {
        const currVal = data[i];
        const nextVal = data[i + 1];
        
        // 如果当前点和下一个点跨越 threshold，插入一个额外的 xAxis 标签
        if (
            (currVal >= threshold && nextVal < threshold) ||
            (currVal < threshold && nextVal >= threshold)
        ) {
            adjustedXAxisData.push('');
        }
    }
}
// 1. 计算红蓝线段的分段数据
// const blueData = []; // 高于阈值
// const redData = [];  // 低于阈值

// 2. 遍历数据，计算交叉点
// for (let i = 0; i < data.length; i++) {
//     const currVal = data[i];
//     const prevVal = i > 0 ? data[i - 1] : null;

//     // 当前点高于阈值 → 蓝色
//     if (currVal >= threshold) {
//         blueData.push(currVal);
//         redData.push(null);

//         // 如果前一个点低于阈值，计算交叉点
//         if (prevVal !== null && prevVal < threshold) {
//             // 计算交叉点（线性插值）
//             // const t = (threshold - prevVal) / (currVal - prevVal);
//             const midVal = threshold; // 刚好在阈值处

//             // 在红色线段末尾补一个阈值点
//             redData[redData.length - 1] = midVal;
//             // 在蓝色线段开头补一个阈值点
//             blueData[blueData.length - 1] = midVal;
//         }
//     }
//     // 当前点低于阈值 → 红色
//     else {
//         redData.push(currVal);
//         blueData.push(null);

//         // 如果前一个点高于阈值，计算交叉点
//         if (prevVal !== null && prevVal >= threshold) {
//             // 计算交叉点（线性插值）
//             // const t = (threshold - prevVal) / (currVal - prevVal);
//             const midVal = threshold; // 刚好在阈值处

//             // 在蓝色线段末尾补一个阈值点
//             blueData[blueData.length - 1] = midVal;
//             // 在红色线段开头补一个阈值点
//             redData[redData.length - 1] = midVal;
//         }
//     }
// }
    const option={
        title: {
            text: '折线图xxxxx',
            left:'center',
            textStyle:{
                color:'#fff',
                fontSize:14
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['投诉率'],
            right:'10%',
            top:'10%',
            textStyle:{
                color:'#fff'
            }
        },
        grid: {
            left: '10%',
            right: '10%',
            top: 50 ,
            bottom:0,
            containLabel: true
        },
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                    color: '#fff' // 设置 X 轴文字颜色为绿色
                },
            data: adjustedXAxisData
        },
        yAxis: {
            type: 'value',
            name:'单位:%',
            nameTextStyle:{
                color:'#fff'
            },
            // offset:50,
            // min:0,
            // max:100,
            axisLabel: {
            color: '#fff' // 设置 y 轴值的颜色（橙色）
            },
            splitLine: {
                lineStyle: {
                color: 'rgba(255,255,255,.2)', // 设置网格线的颜色
                // type: 'dashed' // 设置网格线为虚线（可选）
             }
            }
        },
        series: [
            {
                name: '投诉率',
                type: 'line',
                // stack: '总量',
                data: blueData,
                // smooth: true,//折线变圆滑
                symbol: false,
            symbolSize: (val) => val === threshold ? 0 : 6, // 隐藏插值点的 symbol
            itemStyle: { color: '#5470c6' },
            lineStyle: { color: '#5470c6', width: 2 },
            connectNulls: true, // 允许自动连接 null
           
                areaStyle: {
                    color: {
                        type: 'linear', // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0, 0, 255, 0.5)' // 起始颜色，透明度 0.3
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 0, 255, 0)' // 结束颜色，完全透明
                            }
                        ]
                    }
                }
            },
            {
                name: '投诉率',
                type: 'line',
                // stack: '总量',
                data: redData,
                // smooth: true,//折线变圆滑
                symbol: false,
            symbolSize: (val) => val === threshold ? 0 : 6, // 隐藏插值点的 symbol
            itemStyle: { color: 'red' },
            lineStyle: { color: 'red', width: 2 },
            connectNulls: true, // 允许自动连接 null
                areaStyle: {
                    color: {
                        type: 'linear', // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0, 0, 255, 0.5)' // 起始颜色，透明度 0.3
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 0, 255, 0)' // 结束颜色，完全透明
                            }
                        ]
                    }
                }
            }
        ],
    //     visualMap: {
    //     show: false, // 不显示 visualMap 组件
    //     dimension: 1, // 对 y 轴的值进行映射
    //     pieces: [
    //         { gt: 50, color: '#5470c6' }, // 高于阈值 → 蓝色
    //         { lte: 50, color: 'red' }     // 低于等于阈值 → 红色
    //     ]
    // }
    }
    echart.setOption(option)
      // 监听窗口大小变化事件
      window.addEventListener('resize', function () {
            // 调用 ECharts 实例的 resize 方法
            echart.resize();
        });
}
</script>

<style scoped>
.lineechart{
    width: 100%;
    height: 100%;
    margin-top: 5%;
}
</style>